<template>
	<view-box class="ZymlListxq" bodyPaddingTop="0" bodyPaddingBottom="0">
		<x-header>{{title}}</x-header>
		<!-- <group-title> 安监局</group-title> -->
		<scroller lock-x height="-120px" @on-pullup-loading="onScrollBottom" :pullup-config="pullupconfig" ref="scrollerBottom" :use-pullup="true">
			<grid :cols="1" :show-lr-borders="false">
				<grid-item v-for="item in pageList" :key="item.id" @on-item-click="reDetailAction(item.id,item.resourceType,item.resourceSource ,item.categoryCodeId)">

					<div class="mui-card-header " style="background: #3fccac;color:#cdede8 "> ZSJ-20186281504</div>
					<div class="mui-card-content ">
						<div class="mui-card-content-inner " style="color : #7f7f7f ">
							关于XXXXX的服务申请
						</div>
					</div>
					<div class="mui-card-footer ">
						<div class="mui-card-link " style="color: #f49b1d; ">进度： <span>审核中</span></div>
						<div class="mui-card-link " style="color:#a1a1a1 ">时间： <span>2018-08-21 </span></div>
					</div>

					<!--<div class="titles">{{item.resourceName}}</div>
					<div class="textl">{{item.shareCondition}} </div>
					<div class="textr">{{item.resourceTypeText}}</div>-->
				</grid-item>
			</grid>
			<!-- <load-more tip="loading"></load-more> -->
		</scroller>
	</view-box>
</template>
<script>
	import {
		ViewBox,
		XHeader,
		Search,
		Group,
		Grid,
		GridItem,
		GroupTitle,
		Scroller,
		LoadMore
	} from "vux";
	import { mapState, mapMutations, mapGetters, mapActions } from "vuex";
	export default {
		name: "ZymlListxq",
		components: {
			ViewBox,
			XHeader,
			Search,
			Group,
			Grid,
			GridItem,
			GroupTitle,
			Scroller,
			LoadMore
		},
		data() {
			return {
				searchValue: "",
				codeId: "",
				rows: 15,
				page: 1,
				title: '',
				flowStatus: '',
				pageList: [],
				total: 0,
				loaded: false,
				pullupconfig: {
					content: "上拉刷新",
					upContent: "上拉刷新",
					downContent: "上拉刷新",
					loadingContent: "加载中..."
				}
			};
		},
		computed: {
			//...mapGetters(["catalog_page"])
		},
		created() {
			if(this.$route.query.id !== undefined) {
				this.codeId = this.$route.query.id;
				this.title = this.$route.query.name;
				this.onFetching = true;
				let _self = this;
				this.$store
					.dispatch("getFwsqListData", {
						rows: this.rows,
						page: this.page,
						title: this.title,
						flowStatus: this.flowStatus
					})
					.then(res => {
						//console.log(1);
						_self.pageList = res.rows;
						console.log(JSON.stringify(_self.pageList));
						_self.total = res.rows.length;
						_self.onFetching = false;
						if(res.rows.length === res.total) {
							_self.loaded = true;
							_self.$refs.scrollerBottom.disablePullup();
							_self.$refs.scrollerBottom.donePullup();
						} else {
							_self.page++;
						}
					});
			} else {
				this.onFetching = true;
				let _self = this;
				this.$store
					.dispatch("getFwsqListData", {
						rows: this.rows,
						page: this.page,
						title: this.title,
						flowStatus: this.flowStatus
					})
					.then(res => {
						//console.log(1);
						_self.pageList = res.rows;
							console.log(JSON.stringify(res));
						/*_self.total = res.rows.length;
						_self.onFetching = false;
						if(res.rows.length === res.total) {
							_self.loaded = true;
							_self.$refs.scrollerBottom.disablePullup();
							_self.$refs.scrollerBottom.donePullup();
						} else {
							_self.page++;
						}*/
					});
			}
		},
		mounted() {
			this.$nextTick(() => {
				this.$refs.scrollerBottom.reset({
					top: 0
				});
			});
		},
		methods: {
			onFocus() {},
			onCancel() {},
			onScrollBottom() {
				if(!this.onFetching && !this.loaded) {
					this.onFetching = true;
					let _self = this;
					this.$store
						.dispatch("getFwsqListData", {
							rows: this.rows,
							page: this.page,
							title: this.title,
							flowStatus: this.flowStatus
						})
						.then(res => {
							//console.log(1);
							_self.pageList = res.rows;
							console.log(JSON.stringify(res));
							/*_self.total = res.rows.length;
							_self.onFetching = false;
							if(res.rows.length === res.total) {
								_self.loaded = true;
								_self.$refs.scrollerBottom.disablePullup();
								_self.$refs.scrollerBottom.donePullup();
							} else {
								_self.page++;
							}*/
						});
				}
			},
			onSubmit(keytext) {
				this.$refs.search.setBlur();
				this.$vux.toast.show({
					type: "text",
					position: "top",
					text: keytext
				});
			}
		}
	};
</script>
<style lang="less">
	.ZymlListxq {
		.icons {
			fill: #f70968;
		}
		.iconstext {
			color: #f70968;
		}
	}
</style>